       
            
<script src="https://maps.google.com/maps?file=api&v=2&key=AIzaSyAgenDXkjeAXE7YNVaUJVr1AZ_KqUTjKuE&sensor=true" type="text/javascript">
</script>

<table border="0" cellspacing="0" cellpadding="0" style="margin-top: 30px;" width="100%">
    <tr>
        <td align="center">
            
            
            
        
<table border="0" cellspacing="0" cellpadding="0" style="margin-top: 30px;" width="90%">
    <tr>
        <td align="center">

                    <table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" >
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
<div id="map_canvas" style="width: 580px; height: 580px; float:left; border: 1px solid black; "></div>

            </td>
        </tr>

</table>

    <script type="text/javascript">
    
    var map      = null;
    var geocoder = null;

                                         
      if (GBrowserIsCompatible()) {	
        map = new GMap2(document.getElementById("map_canvas"));

        map.setCenter(new GLatLng(19.35,-99.1616667), 12);
        map.addControl(new GSmallMapControl());
	   	map.addControl(new GMapTypeControl());

        geocoder = new GClientGeocoder();
                geocoder.getLatLng('Ciudad Mexico ALVARO OBREGON',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("ALVARO OBREGON<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico BENITO JUAREZ',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("BENITO JUAREZ<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico COYOACAN',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("COYOACAN<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico FLOTANTE',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("FLOTANTE<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico IZTAPALAPA',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("IZTAPALAPA<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico MAGDALENA CONTRERAS',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("MAGDALENA CONTRERAS<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico TLALPAN',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("TLALPAN<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
                 geocoder.getLatLng('Ciudad Mexico XOCHIMILCO',
          		function(point) {
                        var marker = new GMarker(point);
            			map.addOverlay(marker);
                                GEvent.addListener(marker,"click", function() {
                                        
                                        marker.openInfoWindowHtml("XOCHIMILCO<br>Otro");
                                        
                                    });                            
               	}
        	);
                    
         
      } 

     
     </script>
            
            
        </td>
        <td style="padding: 4px;"></td>
        
        <td>
            
            
                    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['ALVARO OBREGON', 356],['BENITO JUAREZ', 20],['COYOACAN', 776],['FLOTANTE', 16],['IZTAPALAPA', 128],['MAGDALENA CONTRERAS', 187],['TLALPAN', 962],['XOCHIMILCO', 79],          
        ]);

        var options = {
          title: ' Total clientes Activos = 2524',
          width: 580,
          height: 580,
          backgroundColor: 'none',
          is3D: true,
          legend: {position: 'bottom', textStyle: {color: 'blue', fontSize: 10}}
          
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    
<table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" >
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_div" style="border: 1px solid black;"></div

            </td>
        </tr>

</table>

    
            
            
        </td>
        
        
    </tr>
    <tr><td colspan="3" height="10px"></td></tr>
    <tr><td colspan="3">
            
        
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['ALVARO OBREGON', 326],['BENITO JUAREZ', 42],['COYOACAN', 1092],['FLOTANTE', 667],['IZTAPALAPA', 138],['MAGDALENA CONTRERAS', 156],['TLALPAN', 880],['XOCHIMILCO', 109],          
        ]);

        var options = {
          title: ' Total clientes flotante = 3410',
          width: 500,
          height: 500,
          backgroundColor: 'none'
          //is3D: true
          
          
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_divStatus2'));
        chart.draw(data, options);
      }
    </script>
    
<table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" style="float: left; margin-left: 5px; margin-bottom: 10px;">
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_divStatus2" style="border: 1px solid black;"></div>

            </td>
        </tr>

</table>


    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['ALVARO OBREGON', 244],['BENITO JUAREZ', 23],['COYOACAN', 673],['FLOTANTE', 30],['IZTAPALAPA', 74],['MAGDALENA CONTRERAS', 122],['TLALPAN', 561],['XOCHIMILCO', 66],          
        ]);

        var options = {
          title: ' Total clientes no cliente = 1793',
          width: 500,
          height: 500,
          backgroundColor: 'none'
          //is3D: true
          
          
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_divStatus3'));
        chart.draw(data, options);
      }
    </script>
    
<table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" style="float: left; margin-left: 5px; margin-bottom: 10px;">
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_divStatus3" style="border: 1px solid black;"></div>

            </td>
        </tr>

</table>


    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['ALVARO OBREGON', 107],['BENITO JUAREZ', 9],['COYOACAN', 182],['FLOTANTE', 12],['IZTAPALAPA', 26],['MAGDALENA CONTRERAS', 55],['TLALPAN', 143],['XOCHIMILCO', 10],          
        ]);

        var options = {
          title: ' Total clientes perdido = 544',
          width: 500,
          height: 500,
          backgroundColor: 'none'
          //is3D: true
          
          
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_divStatus4'));
        chart.draw(data, options);
      }
    </script>
    
<table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" style="float: left; margin-left: 5px; margin-bottom: 10px;">
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_divStatus4" style="border: 1px solid black;"></div>

            </td>
        </tr>

</table>


    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['ALVARO OBREGON', 0],['BENITO JUAREZ', 0],['COYOACAN', 0],['FLOTANTE', 0],['IZTAPALAPA', 0],['MAGDALENA CONTRERAS', 0],['TLALPAN', 0],['XOCHIMILCO', 0],          
        ]);

        var options = {
          title: ' Total clientes membresia = 0',
          width: 500,
          height: 500,
          backgroundColor: 'none'
          //is3D: true
          
          
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_divStatus5'));
        chart.draw(data, options);
      }
    </script>
    
<table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" style="float: left; margin-left: 5px; margin-bottom: 10px;">
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_divStatus5" style="border: 1px solid black;"></div>

            </td>
        </tr>

</table>


                
        </td></tr>
    
   <tr><td colspan="3" height="10px"></td></tr>
    <tr><td colspan="3">

                      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Mes','activo','flotante','no cliente','perdido','membresia',],
          ['2012/01',  165,      938,         522,             998,           450],
          ['2012/02',  135,      1120,        599,             1268,          288],
          ['2012/03',  157,      1167,        587,             807,           397],
          ['2012/04',  139,      1110,        615,             968,           215],
          ['2012/05',  136,      691,         629,             1026,          366]
        ]);

        var options = {
          title : 'Captura de Clientes',
          vAxis: {title: "Clientes"},
          hAxis: {title: "Mes"},
          seriesType: "bars",
          width: 1160,
          series: {5: {type: "line"}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_divPeriodo'));
        chart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
    
<table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" >
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_divPeriodo" style="border: 1px solid black;" width="900px"></div>

            </td>
        </tr>

</table>
    
    
      
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Gastos', 'Ingresos'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Gastos / Ingresos',
          width: 1160,
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_divPeriodo1'));
        chart.draw(data, options);
      }
    </script>
    
    
    <table class="operadorServicio" border="0" cellspacing="0" cellpadding="0" >
        <tr class="addEtiquetaTitulo">
            <td><p>Ubicacion Demografica</p></td>
        </tr>
        <tr class="addEtiquetaFila">
            <td>


    
            <div id="chart_divPeriodo1" style="border: 1px solid black;" width="900px"></div>

            </td>
        </tr>

</table>
        </td>
        
        
    </tr>
</table>
 
            
            
         </td>        
    </tr>
</table>           